<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户中心</title>
    <link rel="stylesheet" type="text/css" href="../../static/news/css/reset.css">
    <link rel="stylesheet" type="text/css" href="../../static/news/css/main.css">
    <link rel="stylesheet" type="text/css" href="../../static/news/css/jquery.pagination.css">
    <script type="text/javascript" src="../../static/news/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../../static/news/js/jquery.pagination.min.js"></script>
    <script type="text/javascript" src="../../static/news/js/user_follow.js"></script>
</head>
<body class="inframe_body">
<h3 class="common_title">我的关注</h3>
<ul class="card_list_con">
    {% for user in followed -%}
        <li class="author_card card_list">
            <a href="#" target="_blank" class="author_pic"><img src="
                        {% if user.avatar_url %}{{ user.avatar_url }}{% else %}
                        ../../static/news/images/user_pic.png
                        {% endif %}" alt="author_pic">
            </a>
            <a href="#" target="_blank" class="author_name">{{ user.nick_name }}</a>
            <div class="author_resume">{{ user.signature }}</div>
            <div class="writings"><span>总篇数</span><b>{{ user.news_count }}</b></div>
            <div class="follows"><span>粉丝</span><b>{{ user.followers_count }}</b></div>
            <a href="javascript:;" class="focused fr" data-userid="{{ user.id }}"><span class="out">已关注</span><span
                    class="over">取消关注</span></a>
            <a href="javascript:;" class="focus fr" data-userid="{{ user.id }}" style="display:none">关注</a>
        </li>
    {%- endfor %}
</ul>

<div id="pagination" class="page"></div>

<script>

    $(function () {
        // 分页功能
        $("#pagination").pagination({
            currentPage: {{ curr_page }},
            totalPage: {{ total_page }},
            callback: function (current) {
                //window.location.href = "users/follow_list/" + current
                $.ajax({
                    type: "GET",
                    url: "follow?page=" + current,
                    dataType: "json",
                    success: function (resp) {
                        //拼接html(这个部分根据自己的需求去实现)
                        totalPage = resp.total_page
                        var users = resp.followed;
                        //console.log(users);
                        var htm = '';

                        users.forEach(function (user) {
                            htm += '<li class="author_card card_list">';
                            htm += '<a href="#" target="_blank" class="author_pic"><img src="';
                            if (user == null) {
                                htm += user.avatar_url
                            } else {
                                htm += '../../static/news/images/user_pic.png"'
                            }
                            htm += ' alt="author_pic"></a>';
                            htm += '<a href="#" target="_blank" class="author_name">' + user.nick_name +'</a>';
                            htm += '<div class="author_resume">' + user.signature + '</div>';
                            htm += '<div class="writings"><span>总篇数</span><b>' + user.news_count + '</b></div>';
                            htm += '<div class="follows"><span>粉丝</span><b>' + user.followers_count + '</b></div>';
                            htm += '<a href="javascript:;" class="focused fr" data-userid="' + user.id + '"><span class="out">已关注</span><span class="over">取消关注</span></a>';
                            htm += '<a href="javascript:;" class="focus fr" data-userid="' + user.id + '" style="display:none">关注</a></li>';
                        });

                        $('.card_list_con').html(htm)
                    }});
            }
        });
    });
</script>
</body>
</html>